<template>
    <div class="p-2">
        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave">
            <searchrevealing>
                <el-tabs v-model="activeTab">
                    <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="104px">
                        <el-form-item label="库存编码" prop="goodsCode">
                            <el-input v-model="queryParams.goodsCode" placeholder="请输入库存编码" clearable style="width: 220px"
                                @keyup.enter="handleQuery" />
                        </el-form-item>
                        <el-form-item label="商品名称" prop="goodsName">
                            <el-input v-model="queryParams.goodsName" placeholder="请输入商品名称" clearable
                                style="width: 220px" @keyup.enter="handleQuery" />
                        </el-form-item>
                        <el-form-item label="规格材质" prop="goodsSku">
                            <el-input v-model="queryParams.goodsSku" placeholder="请输入颜色及规格" clearable
                                style="width: 220px" @keyup.enter="handleQuery" />
                        </el-form-item>
                        <el-form-item label="创建时间" prop="putTime">
                            <el-date-picker value-format="YYYY-MM-DD" v-model="putTime" type="daterange"
                                @change="pickerChange" start-placeholder="开始时间" end-placeholder="结束时间" clearable
                                style="width: 220px" />
                        </el-form-item>
                        <el-form-item label="成本价" prop="costPrice">
                            <el-input v-model="queryParams.costPrice" clearable @keyup.enter="handleQuery"
                                style="width: 220px" placeholder="请输入成本价" />
                        </el-form-item>
                        <el-form-item label="卖价/佣金" prop="commission">
                            <el-input v-model="queryParams.commission" clearable @keyup.enter="handleQuery"
                                style="width: 220px" placeholder="请输入卖价/佣金" />
                        </el-form-item>
                        <el-form-item label="售卖规格" prop="sellSku">
                            <el-input v-model="queryParams.sellSku" placeholder="请输入售卖规格" clearable style="width: 220px"
                                @keyup.enter="handleQuery" />
                        </el-form-item>
                        <el-form-item label="售卖部门" prop="anchor">
                            <el-input v-model="queryParams.anchor" clearable @keyup.enter="handleQuery"
                                style="width: 220px" placeholder="请输入售卖部门" />
                        </el-form-item>
                        <el-form-item label="供应商名称" prop="supplierName">
                            <el-input v-model="queryParams.supplierName" clearable @keyup.enter="handleQuery"
                                style="width: 220px" placeholder="请输入供应商名称" />
                        </el-form-item>

                    </el-form>
                    <div class="form_button">
                        <el-button type="primary" @click="handleQuery" :loading="loading">查询</el-button>
                        <el-button @click="resetQuery" :loading="loading">重置</el-button>
                    </div>
                </el-tabs>
            </searchrevealing>
        </transition>
        <el-card shadow="never">
            <template #header>
                <el-row :gutter="10" class="mb8">
                    <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :name="'聚水潭商品及库存管理'"
                        @updateColumn="getColmun"></right-toolbar>
                </el-row>
            </template>
            <el-table v-loading="loading" row-key="id" :data="tableData" border @header-dragend="dragEnd">
                <el-table-column label="序号" type="index" width="55" align="center" />
                <el-table-column v-for="(item, index) in commodityManage" :key="index" :label="item.label"
                    align="center" :prop="item.prop" show-overflow-tooltip :fixed="item.fixed" :width="item.width">
                    <template #default="scope">
                        <image-preview v-if="item.prop == 'goodsImg'" :src="scope.row.goodsImg" :width="50"
                            :height="50" />
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
                    <template #default="scope">
                        <el-button link type="primary" @click="handleInfo(scope.row, '查看详情')"
                            class="color_theme">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="tableTotal > 0" :total="tableTotal" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="paginationChange" />
        </el-card>

        <el-drawer v-model="isAddDrawer" :title="AddFormTitle" direction="rtl" size="70%" :before-close="handleClose"
            :close-on-click-modal="false">
            <AddForm v-if="isAddDrawer" @onSubmit="AddFormSubmit" :AddFormData="AddFormData" />
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
import { getJvshuitanData } from '@/api/group/productOutbound/index'
import { loginSupplierByRoleList } from '@/api/group/supplier/index'
import AddForm from './addform/index.vue'
import { queryOperationDeptList } from '@/api/group/productSelectionPricing'
// 时间
const putTime = ref()
const commodityManage = ref()
const columnData = ref()
const activeTab = ref('qualityControl');
const queryFormRef = ref();
const isAddDrawer = ref(false)
const showSearch = ref(true);
const loading = ref(false);
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    goodsCode: '',
    goodsName: '',
    goodsSku: '',
    startTime: undefined,
    endTime: undefined,
    commission: '',
    sellSku: '',
    anchor: '',
    supplierName: '',
    costPrice: ''
})
const tableData = ref([])
const tableTotal = ref(0)
const supplierNameOptions = ref<any[]>([])
const AddFormTitle = ref('')
const AddFormData = ref()
const supplierLoading = ref(true)
const supplierNameDate = ref<any>({
    pageNum: 1,
    pageSize: 10,
    supplierName: ''
})
const supplierQueryLoading = ref(false)
const supplierNametotal = ref()


// 查询列表数据
const getList = async () => {
    loading.value = true
    const { rows = [], total = 0 } = await getJvshuitanData(queryParams.value)
    tableData.value = rows
    tableTotal.value = total
    loading.value = false
}
/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    putTime.value = undefined
    queryParams.value.startTime = undefined
    queryParams.value.endTime = undefined
    handleQuery();
};

/** 查看商品详情 */
const handleInfo = (row: any, title: string) => {
    isAddDrawer.value = true;
    AddFormTitle.value = title
    AddFormData.value = row
};
// 弹框关闭
const handleClose = async () => {
    if (AddFormTitle.value == '查看详情') {
        isAddDrawer.value = false
    } else {
        await proxy?.$modal.confirm('是否退出当前编辑页面，已编辑的商品信息将被清空');
        isAddDrawer.value = false
    }
}
// 商品提交回调函数
const AddFormSubmit = () => {
    isAddDrawer.value = false
    getList()
}
/** 获取colmun */
const getColmun = async () => {
    const columnDatas = await proxy?.useColumn('聚水潭商品及库存管理')
    commodityManage.value = columnDatas.columnCustom
    columnData.value = columnDatas
    queryParams.value.pageSize = columnDatas.columnPageSize || 10
}
/** 拖拽事件 */
const dragEnd = async (newWidth: number, oldWidth: number, column: any, event: MouseEvent) => {
    columnData.value.columnCustom.map((item: any) => {
        if (item.prop == column.property) {
            item.width = newWidth
        }
    })
    await proxy?.useColumnUpdate(columnData.value, queryParams.value.pageSize)
}
/** 页数变化 */
const paginationChange = async () => {
    await getList();
    await proxy?.useColumnUpdate(columnData.value, queryParams.value.pageSize)
    getColmun()
}
onMounted(async () => {
    await getColmun()
    await getList()
})

// 完成时间筛选
const pickerChange = (val: string[]) => {
    if (val && val.length) {
        (queryParams.value.startTime as any) = val[0];
        (queryParams.value.endTime as any) = val[1];
    } else {
        queryParams.value.startTime = undefined
        queryParams.value.endTime = undefined
    }
}

</script>

<style lang="scss" scoped>
.circular {
    display: inline;
    height: 30px;
    width: 30px;
    animation: loading-rotate 2s linear infinite;
}

.path {
    animation: loading-dash 1.5s ease-in-out infinite;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke-width: 2;
    stroke: var(--el-color-primary);
    stroke-linecap: round;
}

.supplierSelect {
    :deep(.el-popper) {
        left: 0 !important;
        top: 34px !important;
        z-index: 7000 !important;
        width: 100% !important;
    }
}

.supplierSelect_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.el-select-loading__tips {
    color: #606266;
    font-size: 14px;
}

:deep(.el-tabs__content) {
    overflow: visible !important;
}

.supplierName {
    display: flex;
    align-items: center;
    justify-content: center;

    .el-image {
        width: 16px;
        height: 16px;
    }

}

.visaExemption {
    width: 14px;
}

.supplierName_text {
    overflow: hidden;
    overflow-wrap: break-word;
    text-overflow: ellipsis;
    line-height: 1;
}

.el-select-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: initial;
    pointer-events: none;
    color: var(--el-color-info);
    font-size: 12px;

    &__icon {
        font-size: 16px;
        animation: rotate 1.5s linear infinite;
    }

    &__tips {
        margin-left: 6px;
    }

    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
}
</style>